<template>
    <div class="appoint-affifm">
      <div class="appoint-affifm-title">
          <span class="appoint-affifm-title-isok">预约确认</span>
          <span class="appoint-affifm-title-isclose" @click="closeDiaMask">&times;</span>
      </div>
      <div class="appoint-affifm-content">
          <template>
            <div class="appoint-affifm-content-message">
                <p>我们将在直播开始前10分钟</p>
                <p>通过短信的方式通知你！</p>             
            </div>
            <div class="appoint-affifm-content-phone">
                你的预约号码为：<span>15102122247</span>
            </div>
          </template>
          <!-- <template>
            <div class="appoint-affifm-content-message">
                <p>非常抱歉</p>
                <p>直播开始时间小于10分钟</p>
                <p>无法预约提醒</p>
            </div>
          </template> -->
      </div>
      <div class="appoint-affifm-footer">
          <div class="appoint-affifm-footer-temporarily">
              暂不预约
          </div>
          <div class="appoint-affifm-footer-know">
              我知道了
          </div>
      </div>
    </div>
</template>
<script>
export default {
    data() {
      return{}
    },
    methods:{
        closeDiaMask(){
            this.$emit('appointStatus');
        }
    }
}
</script>
<style scoped>
.appoint-affifm{
  /* font-family: "Source Han Sans CN"; */
  z-index: 10;
  width: 80%;
  background: #fff;
  position: fixed;
  top: 30%;
  margin-top: -50px;
  left: 50%;
  transform: translateX(-50%);
  padding: 20px;
  border-radius: 5px;
}
.appoint-affifm-title{
    margin-bottom: 10px;
}
.appoint-affifm-content-message{
    margin-bottom: 20px;
}
.appoint-affifm-title-isok{
    font-size: 20px;  
    font-weight: bold;
}
.appoint-affifm-title-isclose{
    font-size: 18px;
    position: absolute;
    right: 10px;
    top:10px;
    font-weight: bold;
    cursor: pointer;
}
.appoint-affifm-content-phone span{
    color: #1aa9ff;
}
.appoint-affifm-footer{
    display: flex;
}
.appoint-affifm-footer-temporarily{
    margin-right: 10px;
    background: #df7488;
}
.appoint-affifm-footer{
    margin: 30px 0 10px 0;
}
.appoint-affifm-footer-know{
    background: #06a2ff;
}
.appoint-affifm-footer-temporarily,.appoint-affifm-footer-know{
    width: 90px;
    height: 30px;
    flex-grow: 1;
    text-align: center;
    line-height: 30px;
    color:#fff;
    border-radius: 4px;
}
</style>